<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>部省两级网络状态管理</title>
  <link rel="stylesheet" href="../assets/styles.css" />
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    /* 当前网络高亮样式：绿色边框与角标点 */
    .active-net { border: 1px solid #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,0.35) inset; position: relative; }
    .active-net::after { content: ''; position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #10b981; }
  </style>
</head>
<body class="body-bg">
  <header class="header">
    <div class="title datav-title">河北省高速公路联网收费省级密钥资源池管理系统</div>
  </header>
  <div class="layout">
    <aside class="sidebar">
      <!-- <div class="logo">密钥资源池</div> -->
      <div class="logo">部省密钥网络状态监控</div>
      <nav class="menu">
        <a href="../index.html">首页</a>
        <a href="app.html">应用管理</a>
        <a href="crypto.html">加密设备状态</a>
        <a href="security.html">安全设备状态</a>
        <a class="active" href="network.html">部省密钥网络状态</a>
        <a href="jobs.html">定时任务</a>
      </nav>
      <div class="tree">
        <div class="tree-node">
          <div class="tree-header">报表管理<span class="chevron"></span></div>
          <div class="tree-children">
            <a class="tree-link" href="reports.html?tab=app" data-tab="app">服务调用统计</a>
            <a class="tree-link" href="reports.html?tab=crypto" data-tab="crypto">加密设备运行监测</a>
            <a class="tree-link" href="reports.html?tab=security" data-tab="security">安全设备运行监测</a>
            <a class="tree-link" href="reports.html?tab=network" data-tab="network">部省密钥网络运行报表</a>
          </div>
        </div>
      </div>
    </aside>
    <div class="content">
      <main class="container">
    <section class="card">
      <h3>网络状态实时展示</h3>
      <div class="grid cols-2">
        <div class="card success" id="cardPrimary">
          <h3>主网络</h3>
          <div>状态：可用</div>
          <div>最后心跳时间：2025-10-22 09:12</div>
          <div>心跳频率：30 秒</div>
        </div>
        <div class="card success" id="cardBackup">
          <h3>备网络</h3>
          <div>状态：可用</div>
          <div>最后心跳时间：2025-10-22 09:09</div>
          <div>心跳频率：30 秒</div>
        </div>
      </div>
    </section>

    <section class="grid cols-2" style="margin-top:16px;">
      <div class="card chart-card">
        <h3>近 7 天网络可用率</h3>
        <div class="chart-box"><canvas id="chartAvail"></canvas></div>
      </div>
      <div class="card">
        <h3>心跳检测记录</h3>
        <table class="table">
          <thead><tr><th>检测时间</th><th>结果</th><th>延迟(ms)</th><th>网络类型</th><th>异常原因</th></tr></thead>
          <tbody id="recordsHeartbeat"></tbody>
        </table>
      </div>
    </section>

    <section class="card" style="margin-top:16px;">
      <h3>查询接口测试区</h3>
      <button class="button" id="btnTest">测试网络状态接口</button>
      <pre id="testResult" style="margin-top:10px; background:#0b1220; padding:12px; border-radius:8px;">点击按钮进行测试（成功/失败）</pre>
    </section>
      </main>
    </div>
  </div>

  <script>
    new Chart(document.getElementById('chartAvail'), {
      type: 'line',
      data: {
        labels: Array.from({length: 7}, (_,i)=>`D-${7-i}`),
        datasets: [{ label: '可用率(%)', data: Array.from({length:7}, ()=> (99 + Math.random()*1).toFixed(3)), borderColor:'#10b981', tension:.3 }]
      },
      options: { responsive: true, maintainAspectRatio: false, scales: { y: { suggestedMin: 98, suggestedMax: 100 } } }
    });
    // 当前网络高亮：随机选择主/备网络卡片并高亮显示（无文字）
    (function setCurrentNetwork(){
      const primary = document.getElementById('cardPrimary');
      const backup = document.getElementById('cardBackup');
      if (!primary || !backup) return;
      const isPrimary = Math.random() < 0.5;
      primary.classList.toggle('active-net', isPrimary);
      backup.classList.toggle('active-net', !isPrimary);
    })();

    // 心跳检测记录：默认渲染10条，并增加“网络类型”（主/备）
    (function renderHeartbeat(){
      const tbody = document.getElementById('recordsHeartbeat');
      if (!tbody) return;
      const pad2 = n => String(n).padStart(2, '0');
      const fmt = dt => `${dt.getFullYear()}-${pad2(dt.getMonth()+1)}-${pad2(dt.getDate())} ${pad2(dt.getHours())}:${pad2(dt.getMinutes())}:${pad2(dt.getSeconds())}`;
      const reasons = ['超时','连接拒绝','丢包'];
      const netTypes = ['主','备'];
      let html = '';
      for (let i = 0; i < 10; i++) {
        const t = new Date(Date.now() - i * 30 * 1000);
        const ok = Math.random() < 0.85;
        const delay = ok ? Math.floor(10 + Math.random()*30) : '-';
        const netType = netTypes[Math.floor(Math.random()*netTypes.length)];
        const reason = ok ? '-' : reasons[Math.floor(Math.random()*reasons.length)];
        const cls = ok ? '' : ' class="tr-red"';
        html += `<tr${cls}><td>${fmt(t)}</td><td>${ok ? '成功' : '失败'}</td><td>${delay}</td><td>${netType}</td><td>${reason}</td></tr>`;
      }
      tbody.innerHTML = html;
    })();

    document.getElementById('btnTest').addEventListener('click', () => {
      const ok = Math.random() > 0.1;
      const result = ok ? { status: '成功' } : { status: '失败' };
      document.getElementById('testResult').textContent = JSON.stringify(result, null, 2);
    });
  </script>
  <script>
    const th = document.querySelector('.tree-header');
    if (th) th.addEventListener('click', () => th.parentElement.classList.toggle('expanded'));
  </script>
</body>
</html>